import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:fluttertoast/fluttertoast.dart';

class SliverListOneScreen extends StatefulWidget {
  @override
  SliverListState createState() => SliverListState();
}

class SliverListState extends State<SliverListOneScreen>
    with SingleTickerProviderStateMixin {
  final _tabs = <String>["TabA", "TabB"];
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: DefaultTabController(
      length: _tabs.length,
      child: NestedScrollView(
          headerSliverBuilder: (context, innerScrolled) => <Widget>[
                SliverOverlapAbsorber(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: SliverAppBar(
                    //pinned当SliverAppBar划出屏幕时固定位置显示
                    pinned: true,
                    //snap与floating控制SliverAppBar，划出屏幕
                    //snap: false,
                    //floating: false,
                    elevation: 2,
                    //是否显示阴影，展开不显示阴影，合并后显示
                    forceElevated: innerScrolled,
                    expandedHeight: 250,

                    actions: <Widget>[
                      new IconButton(icon: Icon(Icons.share), onPressed: (){
                        Fluttertoast.showToast(msg: "点击了分享");
                      })
                    ],

                    flexibleSpace: FlexibleSpaceBar(
                      title: Text("Sliver-sticky效果"),
                      centerTitle: false,
                      background: Image.network(
                          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587968152169&di=7865d55b111cb87c0685a0f7e69f66b5&imgtype=0&src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0403%2F9fbd08dcj00q8736o000tc000hs00drm.jpg',
                          fit: BoxFit.cover),
                    ),

                    bottom: PreferredSize(child: TabBar(
                      //是否居中显示
                        isScrollable: true,
                        //字体颜色
                        labelColor: Colors.black,
                        //下划线颜色
                        indicatorColor: Colors.red,
                        //下划线长度 label与文字一样长
                        indicatorSize: TabBarIndicatorSize.label,
                        //下划线的高度
                        indicatorWeight: 3.0,
                        controller: tabController,
                        tabs: _tabs
                            .map((tab) => Text(tab,
                            style: TextStyle(
                                fontSize: 18.0,
                                color: Colors.black)))
                            .toList()), 
                        preferredSize: Size.fromHeight(50))

                  ),
                ),


//                SliverPersistentHeader(
//                  pinned: true,
//                  delegate: StickyTabBarDelegate(
//                      child: TabBar(
//                          labelColor: Colors.black,
//                          indicatorColor: Colors.red,
//                          indicatorSize: TabBarIndicatorSize.label,
//                          controller: tabController,
//                          tabs: _tabs
//                              .map((tab) => Text(
//                                    tab,
//                                    style: TextStyle(
//                                        color: Colors.black, fontSize: 18.0),
//                                  ))
//                              .toList())),
//                )
              ],

          body: TabBarView(
              controller: tabController,
              children: _tabs
                  .map((tab) =>
              //SafeArea适配齐刘海屏的widget
              SafeArea(
                  top: false,
                  bottom: false,
                  child: Builder(
                    builder: (context) =>
                        CustomScrollView(
                          key: PageStorageKey<String>(tab),
                          slivers: <Widget>[
                            SliverOverlapInjector(
                                handle: NestedScrollView
                                    .sliverOverlapAbsorberHandleFor(
                                    context)),

                            SliverList(
                                delegate: SliverChildListDelegate([
                                  Text("头部Header1"),
                                  Text("头部Header2"),
                                ])),
                            //Grid的显示区域
                            SliverSafeArea(
                                sliver: SliverPadding(
                                  //显示区域距离上下左右的边距
                                    padding: EdgeInsets.all(10),
                                    //显示的内
                                    sliver: SliverGrid(
                                        delegate: SliverChildListDelegate([
                                          InkWell(
                                            onTap: () =>
                                                Fluttertoast.showToast(
                                                    msg: "点击了Body1"),
                                            child: Container(
                                                color: Colors.lightGreen,
                                                child: Text("内容Body1"),
                                                alignment:
                                                Alignment.center),
                                          ),
                                          Ink(
                                            decoration: BoxDecoration(
                                                color: Colors.green,
                                                borderRadius:
                                                BorderRadius.all(
                                                    Radius.circular(
                                                        10.0))),
                                            child: InkResponse(
                                              borderRadius:
                                              BorderRadius.all(
                                                  Radius.circular(
                                                      10.0)),
                                              //点击或者touch的显示在控件上层，水波纹下层
                                              highlightColor:
                                              Colors.purple[800],
                                              //点击控件的Shape形状
                                              highlightShape:
                                              BoxShape.rectangle,
                                              //水波纹半径
                                              //radius: 500.0,
                                              //水播放的颜色
                                              splashColor:
                                              Colors.green[200],
                                              //水波纹是否需要裁减，false不裁减，不裁减是矩形
                                              containedInkWell: true,

                                              onTap: () =>
                                                  Fluttertoast.showToast(
                                                      msg: "水波纹的响应事件"),
                                              child: Container(
                                                //不能在容器内部设置颜色，否则会遮盖水波纹颜色
                                                //color: Colors.lightGreen,
                                                  child: Text("内容Body1"),
                                                  alignment:
                                                  Alignment.center),
                                            ),
                                          ),
                                          Container(
                                              color: Colors.lightGreen,
                                              child: Text("内容Body1"),
                                              alignment: Alignment.center),
                                          Container(
                                              color: Colors.lightGreen,
                                              child: Text("内容Body1"),
                                              alignment: Alignment.center),
                                          Container(
                                              color: Colors.lightGreen,
                                              child: Text("内容Body1"),
                                              alignment: Alignment.center),
                                          Container(
                                              color: Colors.lightGreen,
                                              child: Text("内容Body1"),
                                              alignment: Alignment.center),
                                          Container(
                                              color: Colors.lightGreen,
                                              child: Text("内容Body1"),
                                              alignment: Alignment.center),
                                          Container(
                                              color: Colors.lightGreen,
                                              child: Text("内容Body1"),
                                              alignment: Alignment.center),
                                        ], semanticIndexOffset: 10),
                                        gridDelegate:
                                        SliverGridDelegateWithFixedCrossAxisCount(
                                            crossAxisCount: 2,
                                            mainAxisSpacing: 10.0,
                                            crossAxisSpacing: 10.0,
                                            //布局的宽高比
                                            childAspectRatio: 1.0)))),
                            SliverList(
                                delegate: SliverChildListDelegate([
                                  Text("尾部Header1"),
                                  Text("尾部Header2"),
                                ])),
                          ],
                        ),
                  ))).toList())
      ),
    ));
  }
}

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({@required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return this.child;
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

  @override
  double get maxExtent => this.child.preferredSize.height;

  @override
  double get minExtent => this.child.preferredSize.height;
}
